<template>
	<view class="housingresource">

		<!-- <u-navbar title="房源" :bgColor="bgColor" :titleStyle="titleStyle">
			<view class="u-nav-slot" slot="left"
				style="display: flex;font-size: 28rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;">
				<u-icon name="search" size="25" color="#ffffff"></u-icon>
			</view>
		</u-navbar> -->
		<!-- <view class="" :style="{'height':globalData.navHeight-10 +'px'}"></view> -->

		<view class="tabs">
			<view class="tabsitem" v-for="(item,index) in tabsList" @click="handleTabs(index,item)" :key="item.id">
				<view class="title" :class="{titled : currIndex == index}">
					{{item.name}}
				</view>
				<view v-if="currIndex == index" class="heng"></view>
			</view>
		</view>


		<view class="content" style="position: fixed;top:88rpx;z-index: 99999;">

			<view style="width: 100vw; height: 40px; background-color: white;">
				<!-- filterData:筛选数据  defaultIndex： 默认选择序列 @ed:选择事件 返回选择的值-->
				<!-- 	<chenchuang-CCDropDownFilter @childEvent="handleChildEvent" :filterData='filterData' 
					:defaultIndex='defaultIndex' @ed='ed'>
				</chenchuang-CCDropDownFilter> -->
				<view class="filter-wrapper"
					:style="{ height: height + 'rpx', top: top,'border-top':border?'1rpx solid #f2f2f2':'none' }"
					@touchmove.stop.prevent="discard">
					<view class="inner-wrapper">
						<view class="mask" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view>
						<view class="navs">
							<view class="c-flex-align"
								:class="{ 'c-flex-center': index > 0,'right c-flex-aligin': index == (filterData.length-1), actNav: index === actNav }"
								v-for="(item, index) in filterData" :key="index" @click="navClick(index)">
								<view v-for="(child, childx) in item" :key="childx">{{ child.name }}
								</view>
								<image src="http://120.76.245.175/uploads/image/top.png"
									style="width: 30rpx;height: 30rpx;" mode="" class="icon-triangle"
									v-if="index === actNav"></image>
								<image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode=""
									class="icon-triangle" v-else>
								</image>
							</view>


						</view>
						<!-- 地区 -->
						<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''"
							v-if="tableIndex==0">

							<view class="btnsbox" style="margin-top: 40rpx;padding: 0 30rpx; box-sizing: border-box;">
								<view class="btn" @click="handleResetarea">
									重置
								</view>
								<view class="btn btns" @click="handleSubmithousetype">
									查看房源
								</view>
							</view>

							<view class="areaBox" style="display: flex;">

								<view class="area">
									<view class="areaitem" :class="{areaitemed:districtCurrindex==index}"
										v-for="(item,index) in district" @click="handledistrictCurrindex(index)"
										:key="index">
										{{item.county}}
									</view>
								</view>

								<view class="street">
									<view class="streetitem" :class="{streetitemed:streetCurrindex==index}"
										v-for="(item,index) in street" @click="handlestreetitemed(index)" :key="index">
										{{item.town}}
									</view>
								</view>

								<view class="street">
									<view class="streetitem" :class="{streetitemed:communityCurrindex==index}"
										v-for="(item,index) in communityList" @click="handlecommunityCurrindex(index)"
										:key="index">
										{{item.village}}
									</view>
								</view>

							</view>


							<view class="" style="height: 30rpx;">

							</view>

						</scroll-view>

						<!-- 房型 -->
						<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''"
							v-if="tableIndex==1">
							<view class="houseType">
								<view class="typeBox">
									<view class="houseTypeitem" :class="{btns:houseTypeIndex == index}"
										v-for="(item,index) in houseType" :key="item.id"
										@click="handleHouseType(item,index)">
										{{item.name}}
									</view>
								</view>

								<view class="btnsbox">
									<view class="btn" @click="handleResethousetype">
										重置
									</view>
									<view class="btn btns" @click="handleSubmithousetype">
										查看房源
									</view>
								</view>
							</view>
						</scroll-view>

						<!-- 租金 -->
						<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''"
							v-if="tableIndex==2">
							<view class="rentBox">

								<view class="rentitem" :class="{rentitemed : rentCurrindex == index}"
									v-for="(item,index) in rentData" :key="item.id" @click="handleRent(item,index)">
									{{item.name}}
								</view>

								<view class="btnsbox" style="margin-top: 40rpx;">
									<view class="btn" @click="handleResetrent">
										重置
									</view>
									<view class="btn btns" @click="handleSubmithousetype">
										查看房源
									</view>
								</view>

							</view>
						</scroll-view>

						<!-- 筛选 -->
						<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''"
							v-if="tableIndex==3">
							<view class="screenBox">
								<view class="orderbgBox">
									<view class="title">
										排序方式
									</view>
									<view class="orderbyitembox">
										<view class="orderbyitem" :class="{orderbyitemed:orderbycurrindex == index}"
											v-for="(item,index) in orderbyList" :key="item.id"
											@click="handleOrder(item,index)">
											{{item.name}}
										</view>
									</view>

								</view>
								<view class="orderbgBox" style="margin-top: 20rpx;">
									<view class="title">
										特色
									</view>
									<view class="orderbyitembox">
										<view class="orderbyitem" :class="{orderbyitemed:advantageCurrindex == index}"
											v-for="(item,index) in advantageList" :key="item.id"
											@click="handleAdvantage(item,index)">
											{{item.name}}
										</view>
									</view>

								</view>

								<view class="orderbgBox" style="margin-top: 20rpx;">
									<view class="title">
										中介费
									</view>
									<view class="orderbyitembox">
										<view class="orderbyitem" style="background-color: #F8AD22; color: #ffffff;">
											不限
										</view>
									</view>

								</view>

								<view class="orderbgBox" style="margin-top: 20rpx;">
									<view class="title">
										房屋朝向
									</view>
									<view class="orderbyitembox">
										<view class="orderbyitem" :class="{orderbyitemed:towardCurrindex == index}"
											v-for="(item,index) in towardList" :key="item.id"
											@click="handleToward(item,index)">
											{{item.name}}
										</view>
									</view>

								</view>

								<view class="btnsbox" style="margin-top: 40rpx;">
									<view class="btn" @click="handleResetscreen">
										重置
									</view>
									<view class="btn btns" @click="handleSubmithousetype">
										查看房源
									</view>
								</view>

							</view>
						</scroll-view>

						<!-- 地铁 -->
						<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''"
							v-if="tableIndex==4">
							<view class="areaBox" style="display: flex;">

								<view class="area">
									<view class="areaitem" :class="{areaitemed:metroindex==index}"
										v-for="(item,index) in metro" @click="handledmetroindex(index)" :key="index">
										{{item.title}}
									</view>
								</view>

								<view class="street">
									<view class="streetitem" :class="{streetitemed:metro1index==index}"
										v-for="(item,index) in metro1" @click="handledmetro1index(item,index)"
										:key="index">
										{{item.title}}
									</view>
								</view>
								<!-- <view class="street">
									<view class="streetitem" :class="{streetitemed:metro2index==index}"
										v-for="(item,index) in metro2" @click="handledmetro2index(item,index)"
										:key="index">
										{{item.title}}
									</view>
								</view> -->
							</view>

							<view class="btnsbox" style="margin-top: 40rpx;padding: 0 30rpx; box-sizing: border-box;">
								<view class="btn" @click="handleResetmetro">
									重置
								</view>
								<view class="btn btns" @click="handleSubmithousetype">
									查看房源
								</view>
							</view>

							<view class="" style="height: 30rpx;"></view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 150rpx;"></view>
		<view v-if="houseList.length" class="dataListBox">
			<view v-if="loginbtn" class="dataItem" v-for="(item,index) in houseList" :key="index"
				@click="handleDetail(item.id)">
				<view class="dataItemLft">
					<image class="refreshimg" :src="item.image" mode="aspectFill"
						style="width: 290rpx; height: 240rpx;border-radius: 20rpx;">
					</image>
				</view>
				<view class="dataItemRight">
					<view class="name">
						{{item.name}}
					</view>
					<view class="distanceBox">
						<view class="distance">
							<view class="">
								<text v-if="item.metro1">距</text>{{item.metro1 == null ? "" : item.metro1}}
							</view>
							<view v-if="item.remark" class="">
								{{item.metro == null ? "" : item.metro}}{{item.remark==null ? '' : item.remark}}米
							</view>
						</view>
						<view class="km" style="color:#F8AD22 ;margin-top: 40rpx;">
							{{item.distance}}km
						</view>
					</view>
					<scroll-view class="advantage" scroll-x="true">
						<view class="advantageitem" v-for="(subitem,index) in item.advantage" :key="item.id">
							{{subitem.name}}
						</view>
					</scroll-view>
					<view class="expense">
						<view v-if="item.price !='0.00'" class="expenseitem">
							{{item.price}}元/月
						</view>
						<view v-else class="expenseitem">
							致电询价
						</view>
						<view class="collect">
							{{item.collect}}收藏
						</view>

					</view>

				</view>

				<view v-if="item.is_top == 1" class="" style="position: relative;top: 0rpx;right: 0rpx;">
					<image src="../../static/image/zd.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
				</view>

			</view>

			<button v-else v-for="(item,index) in houseList" :key="index" class="box_phone_yes"
				open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<view class="dataItem" @click="handleDetail(item.id)">
					<view class="dataItemLft">
						<image class="refreshimg" :src="item.image" mode="aspectFill"
							style="width: 290rpx; height: 240rpx;border-radius: 20rpx">
						</image>
					</view>
					<view class="dataItemRight">
						<view class="name">
							{{item.name}}
						</view>
						<view class="distanceBox">
							<view class="distance">
								<view class="">
									<text v-if="item.metro1">距</text>{{item.metro1 == null ? "" : item.metro1}}
								</view>
								<view v-if="item.remark" class="">
									{{item.metro == null ? "" : item.metro}}{{item.remark==null ? '' : item.remark}}米
								</view>
							</view>
							<view class="km" style="color:#F8AD22 ;margin-top: 40rpx;">
								{{item.distance}}km
							</view>
						</view>

						<scroll-view class="advantage" scroll-x="true">
							<view class="advantageitem" v-for="(subitem,index) in item.advantage" :key="item.id">
								{{subitem.name}}
							</view>
						</scroll-view>
						<view class="expense">
							<view v-if="item.price !='0.00'" class="expenseitem">
								{{item.price}}元/月
							</view>
							<view v-else class="expenseitem">
								致电询价
							</view>
							<view class="collect">
								{{item.collect}}收藏
							</view>
						</view>
					</view>
				</view>
			</button>


		</view>

		<view v-else class="empty-sty">
			<u-empty mode="data" text="目前暂无本房源，正在努力收集中，敬请期待，感谢理解" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>

		<view class="" style="height: 50rpx;"></view>


	</view>
</template>

<script>
	import {
		houseList,
		houseCategoryt,
		houselayout,
		houserent,
		houseadvantage,
		houseatoward,
		houseArea,
		houseMetroCategory,
		house_list,
		obtainMobile
	} from "@/api/api.js"
	export default {
		data() {
			return {
				bgColor: "#F8AD22",
				titleStyle: {
					color: "#ffffff",
					fontSize: "32rpx",
					fontFamily: "PingFang SC-Bold, PingFang SC",
					fontweight: "bold",
				},
				listTop: 0,
				globalData: {
					statusBarHeight: 0, // 状态导航栏高度
					navHeight: 0, // 总体高度
					navigationBarHeight: 0, // 导航栏高度(标题栏高度)
				},
				tabsList: [],
				currIndex: 0,
				filterData: [
					[{
						name: '地区',
						value: ''
					}],


					[{
							name: '房型',
							value: ''
						},

					],

					[{
							name: '租金',
							value: ''
						},

					],

					[{
							name: '筛选',
							value: ''
						},

					],
					[{
						name: '地铁',
						value: ''
					}],
				],
				selIndex: [0, 0, 0, 0],
				houseList: [],
				pageNum: 1,
				paramData: {},
				category_id: "",
				// ======================================================================
				navData: [],
				tableIndex: 0,
				popupShow: false,
				showMask: false,
				actNav: null,
				selDate: '选择日期',
				// selIndex: [], //选中条件索引
				houseType: [], //房型列表
				houseTypeIndex: null,
				rentData: [], //租金列表
				rentCurrindex: null,
				orderbyList: [{
						id: 1,
						name: "默认排序"
					},
					{
						id: 2,
						name: "低价优先"
					},
					{
						id: 3,
						name: "高价优先"
					},
				],
				advantageList: [],
				towardList: [],
				orderbycurrindex: 0,
				advantageCurrindex: null,
				towardCurrindex: 0,
				district: [],
				street: [],
				communityList: [],
				districtCurrindex: null,
				streetCurrindex: null,
				communityCurrindex: null,
				rent: "", //价格筛选
				layout: "", //房型
				toward: "", //朝向
				advantage: "", //特色
				sort: "", // 低价 高价优先
				community: "", //地区id
				metro: [],
				metro1: [],
				metro2: [],
				metroindex: null,
				metro1index: null,
				metro2index: null,
				metro_id: "",
				loginbtn: false,

			}
		},
		onLoad(options) {
			if (uni.getStorageSync('token')) {
				this.loginbtn = true
			} else {
				this.loginbtn = false
			}
			this.houseCategoryt()
			this.getNavbarHeight()
			this.getArea()
			this.keepStatus()
			this.getHouserent()
			this.getHouseadvantage()
			this.getHouseatoward()
		},

		onShow() {
			// console.log("uni",uni.getStorageSync("houseindex"))
			if (uni.getStorageSync("loadTypt")) {
				return
			}
			// if (!uni.getStorageSync('token')) return
			if (uni.getStorageSync("category")) {
				console.log("category", uni.getStorageSync("category"))
				this.currIndex = uni.getStorageSync("category").index
				this.currIndex = 0
				this.category_id = ""
				uni.removeStorageSync("category")
			} else {
				this.currIndex = 0
				this.category_id = ""
			}

			this.houseList = []
			this.pageNum = 1
			this.rent = "" //价格筛选
			this.layout = "" //房型
			this.toward = "" //房型
			this.advantage = "" //房型
			this.sort = "" //房型
			this.community = "" //房型
			this.metro_id = ""
			this.houseCategoryt()
			this.getHouseData()
			this.getNavbarHeight()
			this.getHouselayout()
			this.getArea()
			this.handleResetarea()
			this.keepStatus();
			this.getHouserent()
			this.getHouseadvantage()
			this.getHouseatoward()
			this.handlehouseMetroCategory()
		},
		onReachBottom() {
			this.pageNum++;
			this.getHouseData();
		},
		onPullDownRefresh() {
			console.log("触发了下拉刷新"),
				setTimeout(() => {
					this.pageNum = 1;
					this.getHouseData();
					uni.stopPullDownRefresh();
				}, 2000)
		},
		methods: {
			async handlehouseMetroCategory() {
				let res = await houseMetroCategory()
				this.metro = res.data
				// this.metro1 = res.data[0].children
				// this.metro2 = res.data[0].children[0].children
			},

			//地铁几号线
			handledmetroindex(index) {
				this.metroindex = index
				this.metro1 = this.metro[index].children
				this.metro2 = []
			},
			handledmetro1index(item, index) {
				this.metro1index = index
				// this.metro2 = item.children
				this.handleQK()
				this.metro_id = item.id
				this.pageNum = 1
				this.getHouseData()
				this.tapMask()
			},
			handleQK(type) {
				if (type != '0') {
					this.community = ""
					this.communityCurrindex = null
				}
				this.rent = ""
				this.rentCurrindex = null
				this.layout = ""
				this.houseTypeIndex = null
				this.toward = ""
				this.towardCurrindex = null
				this.advantage = ""
				this.advantageCurrindex = null
				this.sort = ""
				this.orderbycurrindex = null

			},
			handledmetro2index(item, index) {
				this.pageNum = 1
				this.metro2index = index
				this.metro_id = item.id
				this.getHouseData()
				this.tapMask()
				// console.log("444", this.metro_id)
			},
			handleResetmetro() {
				this.metro_id = ""
				this.metroindex = null
				this.metro1index = null
				this.metro2index = null
				this.metro1 = []
				this.metro2 = []
				this.tapMask()

			},

			handleResetrent() {
				this.rentCurrindex = null
				this.rent = ""
			},

			async houseCategoryt() {
				let res = await houseCategoryt()
				if (res.code == 1000) {
					console.log("房子分类", res)
					this.tabsList = res.data
					this.tabsList.unshift({
						name: "全部",
						id: ""
					})
				}
			},
			async getHouseData() {
				// if(this.metro_id != ""){
				// 	this.rent = ""
				// 	this.layout = ""
				// 	this.toward = ""
				// 	this.advantage = ""
				// 	this.sort = ""
				// 	this.community = ""
				// }
				let data = {
					position: "2",
					page: this.pageNum,
					page_size: 10,
					rent: this.rent, //价格
					layout: this.layout, //房型
					toward: this.toward, //朝向
					advantage: this.advantage, //特色
					sort: this.sort, //低价 高价优先
					community: this.community, //地区id
					category_id: this.category_id,
					metro_id: this.metro_id,
					city: uni.getStorageSync('location'),
					latitude: uni.getStorageSync('positions').latitude,
					longitude: uni.getStorageSync('positions').longitude,
				}
				console.log("筛选条件", data)
				let res = await house_list(data)
				console.log("房源", res)
				if (res.code == 1000) {
					if (res.data.data.length > 0) {
						if (this.pageNum == 1) {
							this.houseList = res.data.data;
						} else {
							this.houseList = this.houseList.concat(res.data.data)
						}
					}
				} else {
					if (this.pageNum == 1) {
						uni.showToast({
							title: '暂无该筛选条件的房源，请重置该筛选条件！',
							icon: "none",
							duration: 2000
						});
						this.houseList = []
					} else {
						uni.showToast({
							title: '暂无更多房源',
							icon: "none",
							duration: 1000
						});
					}

				}

			},

			handleDetail(id) {
				uni.setStorageSync("loadTypt", true)
				uni.navigateTo({
					// url: "../home/homedetail"
					url: `../home/homedetail?id=${id}`
				})
			},

			ed(res) {
				console.log('选择res = ' + JSON.stringify(res));
				uni.showModal({
					title: '下拉筛选选择数据',
					content: '所选择数据 = ' + JSON.stringify(res)
				})
			},
			getNavbarHeight() {
				// 状态栏高度
				this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

				// #ifdef MP-WEIXIN
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)

				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
				// console.log("导航栏高度："+this.globalData.navigationBarHeight)

				// 总体高度 = 状态栏高度 + 导航栏高度
				this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight

				// #endif

				console.log("高度", this.globalData)

			},
			handleTabs(index, item) {
				this.currIndex = index
				this.pageNum = 1
				uni.removeStorageSync("houseindex")
				this.category_id = item.id
				this.handleResetarea() //重置地区
				this.handleResethousetype() //重置房型
				this.handleResetrent() //重置租金
				this.handleResetscreen() //重置筛选
				this.handleResetmetro() //重置地铁
				this.getHouseData()
			},
			// =================================================================
			//重置地区
			handleResetarea() {
				this.community = "",
					// this.district = uni.getStorageSync("areaList")
					this.districtCurrindex = null
				this.street = []
				this.communityList = []
			},
			sendParamToParent() {
				let param = {
					rent: this.rent, //价格
					layout: this.layout, //房型
					toward: this.toward, //朝向
					advantage: this.advantage, //特色
					sort: this.sort, //低价 高价优先
					community: this.community, //地区id
				}
				console.log("param//////////////", param)

			},
			handledistrictCurrindex(index) {
				this.districtCurrindex = index
				console.log("mmmmmmmmm", this.district[index])
				if (this.district[index].son) {
					this.street = this.district[index].son
					this.communityList = []
					this.streetCurrindex = null
					this.communityCurrindex = null
				} else {
					this.community = this.district[index].id
					this.tapMask();
				}
			},
			handlestreetitemed(index) {
				this.streetCurrindex = index
				console.log("ssssssssssss", this.district[index])
				if (this.street[index].son) {
					this.communityList = this.street[index].son
					this.communityCurrindex = null
				} else {
					this.community = this.street[index].id
					this.tapMask();
				}

			},
			handlecommunityCurrindex(index) {
				console.log("mmmmmmmmmmmm----------", this.communityList[index])
				this.communityCurrindex = index
				this.community = this.communityList[index].village
				this.metro_id = ""
				this.metro1index = null
				this.handleQK("0")
				this.tapMask();
			},
			getArea() {
				this.district = uni.getStorageSync("areaList")
				// this.street = this.district[0].son
				// this.community = this.street[0].son
			},

			async getHouselayout() {
				let res = await houselayout()
				if (res.code == 1000) {
					this.houseType = res.data
				}
			},

			handleHouseType(item, index) {
				this.layout = item.id
				this.houseTypeIndex = index
			},

			handleResethousetype() {
				this.layout = ""
				this.houseTypeIndex = null
			},

			handleSubmithousetype() {
				this.tapMask();
			},

			handleareaTj() {
				this.community = ""
			},

			async getHouserent() {
				let res = await houserent()
				if (res.code == 1000) {
					this.rentData = res.data
					// console.log("租金",res)
				}
			},
			handleRent(item, index) {
				this.rentCurrindex = index
				this.rent = item.id
				this.tapMask();
			},
			async getHouseadvantage() {
				let res = await houseadvantage()
				if (res.code == 1000) {
					// console.log("房屋特色",res)
					this.advantageList = res.data
				}
			},

			async getHouseatoward() {
				let res = await houseatoward()
				if (res.code == 1000) {
					// console.log("房屋朝向",res)
					this.towardList = res.data
					console.log("this.towardList", this.towardList)
				}
			},
			handleOrder(item, index) {
				this.sort = item.id
				this.orderbycurrindex = index
			},
			handleAdvantage(item, index) {
				this.advantage = item.id
				this.advantageCurrindex = index
			},
			handleToward(item, index) {
				this.toward = item.id
				this.towardCurrindex = index
			},
			handleResetscreen() {
				this.orderbycurrindex = 0
				this.sort = ""
				this.advantageCurrindex = 0
				this.advantage = ""
				this.towardCurrindex = 0
				this.toward = ""
			},
			// ====================================
			keepStatus() {
				this.filterData.forEach(itemnavData => {
					itemnavData.map(child => {
						child.select = false;
					});
					return itemnavData;
				});
				for (let i = 0; i < this.selIndex.length; i++) {
					let selindex = this.selIndex[i];
					this.filterData[i][selindex].select = true;
				}
			},
			navClick(index) {
				this.tableIndex = index;
				console.log(this.actNav);
				if (index === this.actNav) {
					this.tapMask();
					return;
				}
				this.popupShow = true;
				this.showMask = true;
				this.actNav = index;
			},
			handleOpt(index) {
				this.selIndex[this.actNav] = index;
				this.keepStatus();
				setTimeout(() => {
					this.tapMask();
				}, 100);
				let data = [];
				let res = this.filterData.forEach(item => {
					let sel = item.filter(child => child.select);
					data.push(sel);
				});
				console.log(data);
				this.$emit('onSelected', data);
			},
			dateClick() {
				this.tapMask();
			},
			tapMask() {
				this.pageNum = 1
				this.showMask = false;
				this.popupShow = false;
				this.actNav = null;
				this.getHouseData()
			},
			handleDate(e) {
				let d = e.detail.value;
				this.selDate = d;
				this.$emit('dateChange', d);
			},
			discard() {},
			async getPhoneNumber(e) {
				let that = this
				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						console.log("微信获取code码", loginRes);
						that.logincode = loginRes.code
						let data = {
							code: that.logincode,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv
						}
						let res = await obtainMobile(data)
						if (res.code == 1000) {
							uni.setStorageSync("token", res.data.token)
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
							uni.reLaunch({
								url: "/pages/housingresource/index"
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: "success",
								duration: 1000
							});
						}
					}
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.box_phone_yes {
		background-color: transparent;
		border: none;
		width: 690rpx;
		padding: 0;
		text-align: left;
	}

	.box_phone_yes:after {
		border: none;
	}

	.housingresource {

		.tabs {
			width: 100%;
			height: 88rpx;
			background: #F8AD22;
			padding: 15rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			position: fixed;
			z-index: 999999;

			.tabsitem {
				display: flex;
				flex-direction: column;
				align-items: center;

				.title {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 30rpx;
				}

				.titled {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 38rpx;
				}

				.heng {
					width: 40rpx;
					height: 6rpx;
					background: #FFFFFF;
					border-radius: 20rpx 200rpx 20rpx 20rpx;
					margin-top: 15rpx;

				}
			}
		}

		.dataListBox {
			width: 690rpx;
			margin: 0 auto;
			margin-top: 30rpx;

			.dataItem {
				display: flex;
				width: 690rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-bottom: 20rpx;
				position: relative;

				.dataItemLft {
					margin-right: 20rpx;
				}

				.dataItemRight {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					width: 390rpx;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 33rpx;

					}

					.distanceBox {
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 26rpx;
						display: flex;
						justify-content: space-between;

						.distance {
							width: 200rpx;
						}
					}

					.advantage {
						white-space: nowrap;
						width: 100%;
						z-index: 000;

						.advantageitem {
							padding: 5rpx 15rpx;
							height: 40rpx;
							background: #FFF5E1;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F06703;
							line-height: 40rpx;
							text-align: center;
							margin-right: 10rpx;
							display: inline-block;
						}
					}

					.expense {
						display: flex;
						justify-content: space-between;

						.expenseitem {
							font-size: 30rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #F23A00;
							line-height: 35rpx;
						}

						.collect {
							font-size: 22rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #F8AD22;
							line-height: 26rpx;
						}
					}
				}
			}

		}

	}


	.areabtn {
		width: 250rpx;
		height: 70rpx;
		background: #F8AD22;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 70rpx;
	}

	.areaBox {
		width: 100%;

		.area {
			width: 33.3%;
			text-align: center;

			.areaitem {
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 80rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.areaitemed {
				background: #F7F8FA;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.street {
			width: 33.3%;
			text-align: center;

			.streetitem {
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 80rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

			}

			.streetitemed {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

		}


	}

	.houseType {
		width: 750rpx;
		// height: 464rpx;
		background: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;

		.typeBox {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.houseTypeitem {
				width: 204rpx;
				height: 56rpx;
				background: #F7F8FA;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 56rpx;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.btns {
				background: #F8AD22;
				color: #FFFFFF;
			}

		}


	}

	.btnsbox {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.btn {
			width: 320rpx;
			height: 88rpx;
			background: #F7F8FA;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 88rpx;
			text-align: center;
		}

		.btns {
			background: #F8AD22;
			color: #FFFFFF;
		}
	}


	.rentBox {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.rentitem {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 33rpx;
			margin-top: 40rpx;
		}

		.rentitemed {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.screenBox {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 33rpx;
		}

		.orderbgBox {
			.orderbyitembox {
				margin-top: 15rpx;
				display: flex;
				flex-wrap: wrap;

				.orderbyitem {
					width: 156rpx;
					height: 56rpx;
					background: #F7F8FA;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 56rpx;
					text-align: center;
					margin-bottom: 20rpx;
					margin-right: 16rpx;
				}

				.orderbyitemed {
					background: #F8AD22;
					color: #FFFFFF;
				}
			}
		}
	}

	// =============================
	page {
		font-size: 28rpx;
	}

	.c-flex-align {
		display: flex;
		align-items: center;
	}

	.c-flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.filter-wrapper {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 999;

		.inner-wrapper {

			// position: relative;
			.navs {
				position: relative;
				height: 80rpx;
				padding: 0 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-bottom: 2rpx solid #f5f6f9;
				color: #8b9aae;
				z-index: 999;
				box-sizing: border-box;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 30rpx;

				&>view {
					flex: 1;
					height: 100%;
					flex-direction: row;
					z-index: 999;
				}

				.right {
					justify-content: flex-end;
				}

				// .actNav {
				//     color: #4d7df9;
				//     font-weight: bold;
				// }
			}

			.mask {
				z-index: 666;
				position: fixed;
				top: calc(var(--status-bar-height) + 44px);
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0);
				transition: background-color 0.15s linear;

				&.show {
					background-color: rgba(0, 0, 0, 0.01);
				}

				&.hide {
					display: none;
				}
			}

			.popup {
				position: relative;
				max-height: 800rpx;
				background-color: #fff;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				overflow: scroll;
				z-index: 999999999;
				transition: all 1s linear;
				opacity: 0;
				display: none;

				.item-opt {
					height: 80rpx;
					padding: 0 40rpx;
					color: #8b9aae;
					border-bottom: 2rpx solid #f5f6f9;
				}

				.actOpt {
					color: #4d7df9;
					font-weight: bold;
					position: relative;

					&::after {
						content: '✓';
						font-weight: bold;
						font-size: 36rpx;
						position: absolute;
						right: 40rpx;
					}
				}
			}

			.popupShow {
				display: block;
				opacity: 1;
			}
		}

		.icon-triangle {
			width: 16rpx;
			height: 16rpx;
			margin-left: 10rpx;
		}
	}
</style>